<template>
  <div class="cesium-container" ref="mapRef" >
  </div>
</template>

<script setup>
import * as Cesium from "cesium"
import config from '../config'
import pingfang from './pingfang'

defineProps({
  msg: String,
});
Cesium.Ion.defaultAccessToken = config.token
const mapRef = ref(null);

// 可通过摄像机视口远近来实现 设置地球显示比例 数值越大地球越大
Cesium.Camera.DEFAULT_VIEW_FACTOR = 1

// 设置地球默认视角
Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(
  // 西边的经度
  89.5,
  // 南边的纬度
  20.4,
  // 东边的经度
  110.4,
  // 北边的纬度
  61.2
)
const tdtUrl = 'https://t{s}.tianditu.gov.cn/'
const subdomains = ['0','1','2','3','4','5','6','7']

onMounted(async () => {
  const map = new Cesium.Viewer(mapRef.value, {
    // 是否显示信息窗口
    infoBox: false,
    // 是否显示搜索
    geocoder: true,
    // 是否显示home按钮
    homeButton: false,
    // 控制查看器的显示模式 3d 2d 2.5d
    sceneModePicker: true,
    // 是否显示图层选择器
    baseLayerPicker: true,
    // 是否显示帮助按钮
    navigationHelpButton: false,
    // 是否显示左下角仪表盘
    animation: false,
    timeline: false,
    fullscreenButton: false,
    skyBox: new Cesium.SkyBox({
      sources : {
        positiveX :  './sky/right.png',
        negativeX :  './sky/left.png',
        positiveY :  './sky/bottom.png',
        negativeY :  './sky/top.png',
        positiveZ :  './sky/front.png',
        negativeZ :  './sky/back.png'
      }
    }),
    // orderIndependentTranslucency: false,
    contextOptions: {
        webgl: {
            alpha: true
        }
    },
    // terrain: Cesium.Terrain.fromWorldTerrain(),
    // 天地图key 6436b4d4491beec6af94d1db2ae0b0af
    // imageryProvider: new Cesium.WebMapTileServiceImageryProvider({
    //   //影像底图
    //   url: "http://t{s}.tianditu.com/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk="+config.key,
    //   subdomains: subdomains,
    //   layer: "tdtImgLayer",
    //   style: "default",
    //   format: "image/jpeg",
    //   tileMatrixSetID: "GoogleMapsCompatible",//使用谷歌的瓦片切片方式
    //   show: true
    // })
  });

  // 隐藏logo
  map.cesiumWidget.creditContainer.style.display = "none";
  // 隐藏天空盒子
  map.scene.skyBox.show = false
  // 设置背景透明
  map.scene.backgroundColor = new Cesium.Color(0.0, 0.0, 0.0, 0.0);
  // 3D Tiles
  // try {
  //   const tileset = await Cesium.Cesium3DTileset.fromIonAssetId(2367294);
  //   console.log('tileset::: ', tileset);
  //   map.scene.primitives.add(tileset);
  //   map.zoomTo(tileset);
  // } catch (error) {
  //   console.log(`Error loading tileset: ${error}`);
  // } 
  // map.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({   
  //   //影像注记
  //   url: "http://t{s}.tianditu.com/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cia&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default.jpg&tk="+config.key,
  //   subdomains: subdomains,
  //   layer: "tdtCiaLayer",
  //   style: "default",
  //   format: "image/jpeg",
  //   tileMatrixSetID: "GoogleMapsCompatible",
  //   show: true
  // }));

  // 不好使
  // map.imageryLayers.addImageryProvider(new Cesium.OpenStreetMapImageryProvider({
  //     url: 'https://a.tile.openstreetmap.org'
  //   })
  // )  

	  // let flyEntity = new Cesium.Entity({
    //     id: 'flyTmp',
    //     position: Cesium.Cartesian3.fromDegrees(116.37685970334466, 39.954266782491445),
    //     point: {
    //         pixelSize: 100,
    //         color: Cesium.Color.WHITE.withAlpha(0),
    //         outlineColor: Cesium.Color.WHITE.withAlpha(0),
    //         outlineWidth: 1
    //     }
    // });

    // map.entities.add(flyEntity);
    // map.flyTo(flyEntity, {
    // offset: {
    //     heading: Cesium.Math.toRadians(0.0),
    //     pitch: Cesium.Math.toRadians(-90),
    //     range: 200000
    // },
    // duration: 5,
    // });

  // // 将三维球定位到中国
  // map.camera.flyTo({
  //     destination: Cesium.Cartesian3.fromDegrees(103.84, 31.15, 17850000),
  //     orientation: {
  //         heading :  Cesium.Math.toRadians(348.4202942851978),
  //         pitch : Cesium.Math.toRadians(-89.74026687972041),
  //         roll : Cesium.Math.toRadians(0)
  //     },
  //     complete:function callback() {
  //         // 定位完成之后的回调函数
  //     }
  // });

})

</script>

<style scoped>
.cesium-container {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  position: relative;
  background: url('../assets/images/bg.jpg') no-repeat;
  background-size: cover;
}
</style>
